<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="$t('add')"
    :visible.sync="visible"
    width="65vw"
  >
    <el-form
      :model="form"
      :rules="dataRule"
      label-width="150px"
      ref="dataForm">
      <el-form-item
        :label="$t('product.name')"
        prop="productName">
        <el-input
          placeholder="请输入产品名称"
          v-model="form.productName"
        />
      </el-form-item>
      <el-form-item
        :label="$t('product.code')"
        prop="productCode">
        <sn8-select @change="onSn8Changed"/>
      </el-form-item>
      <el-form-item
        :label="$t('product.type')"
        prop="productTypeId">
        <el-select
          clearable
          filterable
          :placeholder="$t('product.type')"
          v-model="form.productTypeId"
        >
          <el-option
            v-for="item in productionTypes"
            :label="item.label"
            :value="item.value"
            :key="item.id"
          />
        </el-select>
      </el-form-item>
      <!--      <el-form-item-->
      <!--        :label="$t('product.hardwarePlatform')"-->
      <!--        prop="productTypeId"-->
      <!--      >-->
      <!--        <el-select-->
      <!--          clearable-->
      <!--          filterable-->
      <!--          :placeholder="$t('product.hardwarePlatform')"-->
      <!--          v-model="form.hardwarePlatformId"-->
      <!--        >-->
      <!--          <el-option-->
      <!--            v-for="item in hardwarePlatforms"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value"-->
      <!--            :key="item.id"-->
      <!--          ></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item prop="productTempId" :label="$t('product.template')">-->
      <!--        <el-select-->
      <!--          clearable-->
      <!--          filterable-->
      <!--          :placeholder="$t('product.template')"-->
      <!--          v-model="form.productTempId"-->
      <!--        >-->
      <!--          <el-option-->
      <!--            v-for="item in productTemplates"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value"-->
      <!--            :key="item.id"-->
      <!--          ></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item-->
      <!--        :label="$t('product.luaProtocolVersion')"-->
      <!--        prop="luaProtocolVersionId"-->
      <!--      >-->
      <!--        <el-select-->
      <!--          clearable-->
      <!--          filterable-->
      <!--          :placeholder="$t('product.luaProtocolVersion')"-->
      <!--          v-model="form.luaProtocolVersionId"-->
      <!--        >-->
      <!--          <el-option-->
      <!--            v-for="item in luaProtocolVersions"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value"-->
      <!--            :key="item.id"-->
      <!--          ></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item-->
      <!--        :label="$t('product.electronicProtocolVersion')"-->
      <!--        prop="electronicVersionId"-->
      <!--      >-->
      <!--        <el-select-->
      <!--          clearable-->
      <!--          filterable-->
      <!--          :placeholder="$t('product.electronicProtocolVersion')"-->
      <!--          v-model="form.electronicVersionId"-->
      <!--        >-->
      <!--          <el-option-->
      <!--            v-for="item in electVersions"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value"-->
      <!--            :key="item.id"-->
      <!--          ></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item
        :label="$t('product.img')"
        prop="productUrlId">
        <el-upload
          :file-list="imgFiles"
          :limit="1"
          :multiple="false"
          :on-exceed="handleImgFileExceed"
          :on-remove="onImgRemoved"
          :on-success="onImgUploadSuccess"
          with-credentials
          accept="image/png, image/jpeg"
          :action="imgUploadPath"
          list-type="picture-card"
          :headers="imgUploadHeaders"
        >
          <i class="el-icon-plus"/>
        </el-upload>
      </el-form-item>
    </el-form>

    <template slot="footer">
      <el-button
        :loading="requesting"
        @click="visible = false"
      >{{ $t("cancel") }}
      </el-button>
      <el-button
        :loading="requesting"
        @click="submit()"
        type="primary"
      >{{ $t("confirm") }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script>
import mixinViewModule from '@/mixins/mike.view-module'
import ProductMixins from '@/mixins/product/product.mixins'

import Sn8Select from '../../../components/sn8.select'
export default {
  name: 'ProductAdd',
  components: { Sn8Select },
  mixins: [mixinViewModule, ProductMixins],
  data () {
    return {
      visible: false,
      requesting: false
    }
  },
  computed: {
    dataRule () {
      return {
        productName: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        productTypeId: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        productCode: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ]
        // electronicVersionId: [
        //   {
        //     required: true,
        //     message: this.$t('validate.required'),
        //     trigger: 'blur'
        //   }
        // ],
        // hardwarePlatformId: [
        //   {
        //     required: true,
        //     message: this.$t('validate.required'),
        //     trigger: 'blur'
        //   }
        // ],
        // iotModuleId: [
        //   {
        //     required: true,
        //     message: this.$t('validate.required'),
        //     trigger: 'blur'
        //   }
        // ],
        // productTempId: [
        //   {
        //     required: true,
        //     message: this.$t('validate.required'),
        //     trigger: 'blur'
        //   }
        // ],
        // productQrcodId: [
        //   {
        //     required: true,
        //     message: this.$t('validate.required'),
        //     trigger: 'blur'
        //   }
        // ],
        // luaProtocolVersionId: [
        //   {
        //     required: true,
        //     message: this.$t('validate.required'),
        //     trigger: 'blur'
        //   }
        // ]
      }
    }
  },
  mounted () {
    Promise.all([
      this.getElectronicVersions(),
      this.getProductTypes(),
      this.getLuaProtocolVersions(),
      this.getProductTemplates(),
      this.getHardwarePlatForms(),
      this.getIOTModules()
    ])
  },
  methods: {
    handleSubmitSuccess () {
      this.visible = false

      this.$emit('refreshDataList')
    },
    /**
     * Events
     * */

    onSn8Changed (sn8) {
      this.form.productCode = sn8
    }

  }
}
</script>

<style lang="scss" scoped>
.product-add {
}
</style>
